/**
    设置文字是否能被选中

    支持的属性为两种 : none | text
    none : 文字不可以被选中 (默认)
    text : 文字可以被选中，系统内置属性

    @example

    @include utils-user-select()
    @include utils-user-select(none)
*/
@mixin utils-user-select($value: none) {
  -moz-user-select: $value;
  -webkit-user-select: $value;
  -ms-user-select: $value;
}

/**
    清除浮动方法
    
    @注
      需要借助 ::before 和 ::after 伪元素

    @example

    @include utils-clearfix()
  
*/
@mixin utils-clearfix {
  $selector: &;
  @at-root {
    #{$selector}::before,
    #{$selector}::after {
      display: table;
      content: '';
    }
    #{$selector}::after {
      clear: both;
    }
  }
}

/*
    清除浮动样式
    使用伪元素来清除浮动
    不能使用情况：元素需要使用after伪元素 此时使用.f-clearfix元素
 */

@mixin utils-clearfix--after() {
  &::after {
    content: ''; //设置内容为空
    height: 0; //高度为0
    line-height: 0; //行高为0
    display: block; //将文本转为块级元素
    visibility: hidden; //将元素隐藏
    clear: both; //清除浮动
  }
  & {
    zoom: 1; //为了兼容IE
  }
}



/**
  元素居中工具类

  @example

  // 使用绝对定位水平垂直居中
  @include utils-center()

  // 使用行高垂直居中
  @include utils-center--vertical()
 
*/
@mixin utils-center() {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin utils-center--vertical {
  $selector: &;
  @at-root {
    #{$selector}::after {
      display: inline-block;
      content: '';
      height: 100%;
      vertical-align: middle;
    }
  }
}



/*
    定义输入框 placeholder 央视

    @include utils-placeholder
 */
@mixin utils-placeholder {
  &::-webkit-input-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
}

/*
  margin 外边距工具类

  // 非第一个子元素 添加marginTop样式
  @include utils-margin--not-first()
*/
@mixin utils-margin--not-first($block, $top: $base--margin-md) {
  $selector: $block;
  & > #{$selector} {
    margin-top: $top;
    @content;
  }
  & > #{$selector}:first-child {
    margin-top: 0;
  }
}
